<template>
    <div class="shop-page">
        <!-- <div >
            <div class="search-box">
                <van-search placeholder="请输入搜索关键词" v-model="searchValue" />
            </div>
            <van-row class="shop-tabs-gourp">
                <van-col span="6" class="tabs-items">
                    <div class="meun-tabs text-center">全新</div>
                </van-col>
                <van-col span="6" class="tabs-items">
                    <div class="meun-tabs text-center">热卖</div>
                </van-col>
                <van-col span="6" class="tabs-items">
                    <div class="meun-tabs text-center">订单</div>
                </van-col>
                <van-col span="6" class="tabs-items">
                    <div class="meun-tabs text-center">全部</div>
                </van-col>
            </van-row> 
        </div>  -->
        <div style="padding-bottom:55px;">
            <menu-tpl :menuList="menuData" @selectMenu="selectMenu" style="z-index:5;">
                <load-more 
                    :pageIndex="pageIndex" 
                    :pageSize="pageSize" 
                    :totalCount="totalCount" 
                    :openRefresh="true"
                    @refresh="refresh"
                    @loadmore="loadmore">  
                    <div style="min-height:50vh;" v-if="prdData.length>0" >
                        <prd-list :prdList="prdData" page="shop" ></prd-list>
                    </div> 
                    <van-divider dashed  v-if="prdData.length==0">暂无商品</van-divider> 
                </load-more>
            </menu-tpl> 
        </div>  
    </div>
</template>

<script>
import * as api from './../../api/api'
import nError from './../tpl/error'
import menuTpl from './../tpl/menuTpl'
export default {
    data(){
        return{
            searchValue:'', 
            is_loadding: false,
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            bannerImg: [
                'https://img.yzcdn.cn/2.jpg',
                'https://img1.360buyimg.com/da/jfs/t19228/211/989392426/88793/7db97c49/5ab8af5cN6e2a5a56.jpg'
            ], //轮播图
            prdData:[],
            menuData:[],
            category_id:'', 
            userInfo:{},
        }
    },
    created(){
        this.getClassData();
    },
    methods:{
        selectMenu(item){
            this.category_id=item.id;
            this.getGoodslist();
        },
        //分类列表
        getClassData(){
            let vm = this;
            api.fetchGoodsCategory().then(res=>{
                if(res.data.code==200){
                    vm.menuData=res.data.data?res.data.data:[]; 
                    if(vm.menuData.length>0){
                        vm.category_id=vm.menuData[0].id;
                        vm.getGoodslist();  
                    }
                }
            })
        },
        //商品列表
        getGoodslist(){
            let vm = this;
            api.fetchGoodsList({category_id:vm.category_id,page:vm.pageIndex}).then(res=>{
                vm.is_loadding = false; 
                if(res.data.code==200&&res.data.data){  
                    if(vm.pageIndex==1){   
                        vm.prdData=res.data.data?res.data.data:[];
                        res.data.data.length<10?vm.totalCount=0:vm.totalCount=100;
                    }else{
                        if(res.data.data.length>0){   
                            vm.prdData=vm.prdData.concat(res.data.data);;  
                            vm.totalCount+=10;  
                        }else{
                            vm.totalCount=0;
                        } 
                    } 
                }
            }).catch(err=>{
                vm.is_loadding = false;
            })
        },
        loadmore(pageIndex){  
            console.log('加载更多中...')
            if(!this.is_loadding){
                this.pageIndex = pageIndex;
                this.getGoodslist(); 
            }  
        },
        refresh(){
            this.pageIndex = 1;
            this.getGoodslist(); 
            console.log('您下拉刷新了')
        },
    },
    components:{ 
        menuTpl,
        nError
    }

}
</script>


<style scoped lang="scss">
.shop-page{ 
    background:#fff;
    .search-box{
        width:100%;
        position: fixed;
        top:0;
        left:0;
        z-index: 10;
    }
    .shop-tabs-gourp{
        position: fixed;
        left:0;
        top:54px;
        width:100%;
        height: 60px;
        padding: 5px 0;
        background:#fff;
        border-bottom:.013333rem solid #eee;
        z-index: 10;
        .tabs-items{
            .meun-tabs{
                width:1.333333rem;
                height:1.333333rem;
                line-height: 1.333333rem;
                border-radius: 50%;
                border:.013333rem solid #F6F7F8;
                margin:auto;
            }
        }
    }
}

</style>
